<template>
    <transition name="el-fade-in-linear">
        <el-card 
        class="info-project" 
        v-show="tableData.length"
        >
            <div class="title-con">
                <img src="~@images/notice/编组4.png" alt="">
                <span class="title">&nbsp;项目信息</span>
            </div>

            <div class="list">
                <div 
                class="items" 
                v-for="(item,index) in tableData" 
                :key="item.docname"
                v-czc="['查公告-详情', '点击列表' , '本项目信息', index, 'notice-list-thisProject']"
                >
                    <list-item 
                    :data="item" 
                    :title="`${item.notice}`" 
                    :time="item.publishtime" 
                    :isTagLong="true" 
                    @titleClick="titleClick"
                    >
                        <template slot="content"></template>

                        <template slot="icon">
                            <div></div>
                        </template>

                        <template slot="time">
                            <div></div>
                        </template>
                    </list-item>
                </div>
            </div>
        </el-card>
    </transition>
</template>

<script>
import notice from '@/mixins/notice.js';

import ListItem from '../components/item.vue';

export default {
    mixins: [notice],
    components: {
        ListItem,
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            tableData: [],
            isShow:true,
        };
    },
    watch: {
        data: {
            handler(n, o) {
                if (n?.guid === o?.guid) {
                    return;
                }

                this.queryData();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        queryData() {            
            if (!this.data.guid) {
                return;
            }
            
            this.$get(`${this.$store.state.api.tbUrl}/noticerelated/itemnotices.json`, {
                projectname: this.data.project_name,
                noticeid: this.data.guid,
                noticetype: this.data.noticetype,
                projectcode: this.data.project_code,
                pageindex: 1,
                pagesize: 99,
                sortname: 'publishtime',
                sortorder: 'desc',
            }, data => {
                this.tableData = data.rows;
            });
        },
        titleClick(data) {
            this.$emit('click', data);

            this.openNotice(data.guid, data.noticetype, false);
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
$RightTitleColor: #343434;
$RightTitleFont: 14px;

.info-project{
    ::v-deep{
        .el-card__body{
            padding: 5px 10px;
        }
    }

    .title-con {
        display: flex;
        align-items: center;
        padding: 10px 0;

        .title{
            color: $RightTitleColor; // $primaryColor;
            font-size: $RightTitleFont;
            font-weight: 600;
        }
    }

    .list{
        padding-bottom: 8px;
    }

    .items {
        + .items {
            margin-top: 15px;
        }
    }
}
</style>
